<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型-背景色和前景色(box model background and color)</title>
  <!-- 
    CSS的盒子模型中，背景（Background）和颜色（Color）是用来装饰和美化元素的重要属性。
    以下是关于CSS盒子模型中背景和颜色的主要要点： 
 
      1. 背景颜色（Background Color）：可以通过background-color属性为元素设置背景颜色，可以使用颜色名称、十六进制值或RGB值来定义颜色。 
      2. 背景图片（Background Image）：可以通过background-image属性为元素设置背景图片，可以使用URL链接来引用图片文件。 
      3. 背景重复（Background Repeat）：可以通过background-repeat属性控制背景图片在元素内如何重复显示，
         常见的取值包括repeat（默认值，水平和垂直方向重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）和no-repeat（不重复）。 
      4. 背景定位（Background Position）：可以通过background-position属性设置背景图片的位置，可以使用关键字（如top、bottom、left、right）或百分比值来指定位置。 
      5. 背景大小（Background Size）：可以通过background-size属性设置背景图片的大小，可以使用关键字（如cover、contain）或具体数值来控制背景图片的尺寸。 
      6. 文本颜色（Color）：可以通过color属性为文本设置颜色，可以使用颜色名称、十六进制值或RGB值来定义文本颜色。

      注意: 背景色和前景色是两个不同的概念，背景色指的是元素本身的背景颜色，而前景色指的是元素中文本的颜色。
      background的值: background: color url repeat position size attachment origin clip;
   -->
  <style>
    .background-color {
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      color: orange;
      border: 8px solid;
      padding: 16px;
    }
  </style>
</head>

<body>

  <div class="background-color"></div>

</body>

</html>